<!-- 进行未登录操作时弹出 -->

<template>
  <view>
    <!-- 遮罩层 -->
    <view
      v-if="modelValue"
      class="mask"
      @click="handleClose"
    ></view>

    <!-- 弹出内容 -->
    <view class="modal" :class="{ show: modelValue }">
      	<view class="loginContent">
      		<view class="title">您还未登录，请先登录</view>
      		<view style="height: 20%"></view>
      		<view class="loginBox">
      			<button @click="showModal.isShowModal = false">暂不登录</button>
      			<button @click="goLogin">前往登录</button>
      		</view>
      	</view>

    </view>
  </view>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'
import { useUserStore } from '../store'
//控制半模态弹窗
const showModal = useUserStore()

const props = defineProps({
  modelValue: Boolean // 用于 v-model 绑定显示状态
})

const emit = defineEmits(['update:modelValue'])

const handleClose = () => {
  emit('update:modelValue', false)
}



//跳转登录页面
const goLogin = () =>{
	showModal.isShowModal = true
	console.log(showModal.isShowModal)
	uni.navigateTo({
		url:'/pages/loginPage/loginPage'
	})
}
</script>

<style scoped>
.mask {
	margin: 0 auto;
	max-width: 800px;
  position: fixed;
  z-index: 999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4);
}

.modal {	
  position: fixed;
  z-index: 1000;
  left: 0;
  bottom: -60%;
  width: 100%;
  height: 25%;
  background: #fff;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  transition: bottom 0.3s ease;
  padding: 24rpx;
  box-sizing: border-box;
}

.modal.show {
  bottom: 0;
}
		.loginContent{
			width: 100%;
			height: 100%;
			.title{
				width: 100%;
				margin: 30rpx auto;
				font-size: 40rpx;
				text-align: center;
			}
			.loginBox{
				width: 100%;
				display: flex;
				justify-content: space-around;
				button{
					min-width: 120px;
					max-width: 320px;
					aspect-ratio: 5/2;
					border: none;
				}
				button:nth-child(1){
					background-color: #efefef;
					color: #9af5a1;

				}
				button:nth-child(2){
					background-color: #9af5a1;
					color: #fff;
				}
			}
		}
</style>
